<!DOCTYPE html>
<html>
  <head>
    <title>Basic context-fill/context-stroke/-moz-context-properties test</title>
    <style>

    img {
      width: 100px;
      height: 100px;
      -moz-context-properties: fill, stroke;
    }

    .img1 {
        fill: lime;
        stroke: purple;
    }

    .img2 {
        fill: blue;
        stroke: orange;
    }

    .img3 {
        fill: yellow;
        stroke: red;
    }

    </style>
  </head>
  <body>
    <img class="img1" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'>
                           <rect width='100%' height='100%' stroke-width='30px'
                           fill='context-fill red' stroke='context-stroke' fill-opacity='0.5'/></svg>">
    <img class="img2" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'>
                           <rect width='100%' height='100%' stroke-width='30px'
                           fill='context-fill yellow' stroke='context-stroke'/></svg>">
    <img class="img3" src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'>
                          <rect width='100%' height='100%' stroke-width='30px'
                          fill='context-stroke' stroke='context-fill red'/></svg>">
  </body>
</html>
